<template>
  <div class="body">
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>
    <div class="container">
      <div class="nav">
        <div class="option"></div>
        <div class="option"></div>
        <div class="option active" @click="routeTo('/')">首页</div>
        <div class="option active" @click="routeTo('/cart')">购物车</div>
        <div class="option active" @click="routeTo('/bills')">我的订单</div>
        <div class="option"></div>
        <div class="login">
          <a v-if="token==''" @click="$router.replace('/login')">亲，请登录</a>
          <a href="javascript:;" v-if="userInfo!=null">{{userInfo.phone}} [已登陆] - 余额 <span style="color: red">{{this.$store.state.userInfo.balance}} ￥</span></a>
        </div>
        <div class="option"></div>
        <div class="option"></div>
      </div>
      <div class="main">
          <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null,
      token: ''
    }
  },
  created () {
    if (this.$store.state.token != '') {
      this.token = this.$store.state.token
    }

    if (this.$store.state.userInfo == null && this.token != '') {
      this.$http({
        url: '/user/getUserInfoById',
        method: 'get',
      }).then(res => {
        if (res != null) {
          this.userInfo = res
          this.$store.commit('setUserInfo',res)
        }
        console.log(this.userInfo);
      })
    }else {
      this.userInfo = this.$store.state.userInfo
    }
  },
  methods: {
    routeTo(path) {
      this.$router.replace(path)
    }
  }
};
</script>


<style scoped>
.body {
  height: 100%;
}

.container {
  height: 100%;
}

.nav {
    /* position: fixed; */
  height: 40px;
  background-color: #F2F6FC;
  display: flex;

}

.option {
  flex: 1;
  text-align: center;
  line-height: 40px;
  font-size: 13px;
  color: #909399;
  transition: all 0.2s;
}

.active {
  cursor: pointer;
}

.active:hover {
  color: #606266;
  border-bottom: 3px solid rgb(243, 126, 48);
  background-color: #cedeef;
}

.login a {
  line-height: 40px;
  text-decoration: none;
  font-size: 12px;
  color: #909399;
}

a:hover {
    color: rgb(243, 126, 48);
}

.main {
    height: 100%;
}
</style>